<template>
    <div class="bg-content">
        <div class="title">
            <img src="@/assets/home/cricle.png" alt="" class="title-pl" />
            <span class="s-title">
                <span class="title-name">&nbsp;&nbsp;光伏发电量</span>
            </span>
          <span class="right-light">
            <span
                :class="{'active': !isMonth}"
                @click="toggleView(false)">日</span>&nbsp;&nbsp;
                <span
                    :class="{'active': isMonth}"
                    @click="toggleView(true)">月</span>
<!--                <span >日</span>&nbsp;&nbsp;-->
<!--                <span class="active">月</span>-->
            </span>
        </div>
        <div class="content" id="echarts"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import axios from 'axios'; // 导入 axios
export default {
  props: {
    regionId: {
      type: String,
      default: '100000',
    },
  },
  watch: {
    isMonth(newVal) {
      // 根据 isMonth 的值更新 today_num 和 yesterday_num
      if (newVal) {
        // 如果是月份视图
        this.today_num = 2;  // 你可以根据实际需求修改这里的值
        this.yesterday_num = 9; // 同上
      } else {
        // 如果是其他视图
        this.today_num = 4;  // 或者设置为其他默认值
        this.yesterday_num = 10; // 同上
      }
      //this.updateTimeData(newVal);

      this.toggleView(this.isMonth);// 更新数据
    },
    regionId(newVal) {
      //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:", newVal);
      // 在这里可以根据新的区域ID重新请求数据或更新图表
      this.toggleView(this.isMonth); // 组件加载时调用 toggleView
      //this.fetchData()
    },
  },
    data() {
        return {
          //这个要改！！！！！！
          today_num:2,
          yesterday_num: 9,
          isMonth: true, // 控制当前是日视图还是月视图
          chartData: {
            today: [],
            yesterday: [],
          },
          time_data:[
            "8:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
          ],
        };
    },
    mounted() {
    //console.log("新的区域IDnnnnnnnnnnnnnnnnnn:",this.regionId)
      // const echartsDiv = document.getElementById("echarts");
      // console.log("ECharts DOM:", echartsDiv); // 检查是否找到元素

      this.toggleView(this.isMonth); // 组件加载时调用 toggleView


    },
    methods: {
      toggleView(isMonth) {
        this.isMonth = isMonth;
        if (isMonth) {
          // 如果是月视图，更新 time_data
          this.time_data = [
            "1日", "6日", "12日", "18日", "24日", "30日", // 示例数据
            // 这里可以填充月视图所需的数据
          ];
        } else {
          this.today_num = 4;
          this.yesterday_num = 10;
          // 如果是日视图，恢复 time_data
          this.time_data = [
            "8:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
          ];
        }
        this.fetchData(); // 根据当前视图获取数据
      },
//刘奥旸请求
      fetchData() {
        const regionId = this.regionId; // 获取当前的 regionId
        const today_num = this.today_num; // 假设你要传递的日期是 4，或者可以根据需要进行动态设置
        const yesterday_num = this.yesterday_num;
        console.log(this.isMonth)//这个的真假用来判断是年月日

        axios.get(`${this.$httpUrl}PV?id=${regionId}&date=${today_num}`)
            .then(response => {
              // 假设响应数据是一个包含电量数据的数组
              const dataFromApi = response.data; // 根据实际情况调整
             // console.log(dataFromApi);
              this.chartData.today = dataFromApi;
                  console.log(this.time_data)
              this.init(); // 在获取数据后初始化图表
            })
            .catch(error => {
              console.error("获取数据失败:", error);
            });
        // axios.get('http://localhost:8080/lay/PVexer')
        //     .then(response => {
        //       // 假设响应数据是一个包含电量数据的数组
        //       const dataFromApi = response.data; // 根据实际情况调整
        //       console.log(dataFromApi)
        //       this.chartData.today = dataFromApi
        //       this.init(); // 在获取数据后初始化图表
        //     })
        //     .catch(error => {
        //       console.error("获取数据失败:", error);
        //     });

        axios.get(`${this.$httpUrl}PV?id=${regionId}&date=${yesterday_num}`)
            .then(response => {
              // 假设响应数据是一个包含电量数据的数组
              const dataFromApi = response.data; // 根据实际情况调整
             // console.log(dataFromApi);
              this.chartData.yesterday = dataFromApi;
              this.init(); // 在获取数据后初始化图表
            })
            .catch(error => {
              console.error("获取数据失败:", error);
            });


      },
      handleButtonClick() {
        console.log("按钮点击，左边Top当前区域 ID:", this.regionId);
        // 在这里你可以执行其他逻辑
      },
        init() {
          var Aengin = echarts.init(document.getElementById("echarts"));
            //var Aengin = echarts.init(document.getElementById("echarts"));
            Aengin.setOption({
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["今日电量", "昨日电量"], // 图例中的内容
                    orient: "horizontal", // 图例的排列方式：'horizontal'或'vertical'
                    left: "center", // 图例的位置：'center'、'left'、'right'等
                    icon:"line",
                    bottom: "bottom", // 图例的顶部位置
                    textStyle: {
                        color: "#c7c7c7", // 图例文字颜色
                        fontSize: 14, // 图例文字大小
                    },
                },
                grid: {
                    left: "1%", // 左边距
                    right: "1%", // 右边距
                    top: "10%", // 上边距
                    bottom: "15%", // 下边距
                    containLabel: true, // 包含坐标轴标签
                },
                xAxis: [
                    {
                        type: "category",
                        // data: [
                        //     "8:00",
                        //     "10:00",
                        //     "12:00",
                        //     "14:00",
                        //     "16:00",
                        //     "18:00",
                        // ],
                       data: this.time_data,
                      //刘奥旸进行魔改
                         //data: [], // 初始化为空数组
                        axisLine: {
                            lineStyle: {
                                color: "#999",
                            },
                        },
                        axisTick: {
                                show: false // 不显示 Y 轴的小刻度线
                            },
                        axisLabel: {
                            interval: 0,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        splitNumber: 4,
                        splitLine: {
                            show: false,
                            lineStyle: {
                                type: "dashed",
                                color: "#DDD",
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#c7c7c7",
                            },
                        },
                        axisLabel: {
                            color: "#c7c7c7", // 设置Y轴字体颜色为红色
                        },
                         axisTick: {
                                show: false // 不显示 Y 轴的小刻度线
                            },
                        nameTextStyle: {
                            show:false,
                            color: "#999",
                        },
                        splitArea: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "今日电量",
                        type: "line",
                      data:this.chartData.today,
                       //data: [230, 600, 200, 360, 230, 805],
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: {
                                    type: "linear",

                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#ea0000", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#ea0000", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                                shadowColor: "rgba(72,216,191, 0.3)",
                                shadowBlur: 10,
                                shadowOffsetY: 20,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "#ea0000",
                                borderWidth: 2,
                                borderColor: "#ea0000",
                            },
                        },
                        symbol: "none", // 隐藏折线上的点
                        smooth: true,
                    },
                    {
                        name: "昨日电量",
                        type: "line",

                      data: this.chartData.yesterday,
                        // data: [30, 100, 150, 120, 220, 4000],

                        lineStyle: {
                            normal: {
                                width: 2,
                                color: {
                                    type: "linear",

                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#00c63e", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#00c63e", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                                shadowColor: "rgba(72,216,191, 0.3)",
                                shadowBlur: 10,
                                shadowOffsetY: 20,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "#00c63e",
                                borderWidth: 2,
                                borderColor: "#00c63e",
                            },
                        },
                        symbol: "none", // 隐藏折线上的点
                        smooth: true,
                    },
                ],
            });
       },
    },
};
</script>

<style lang="less" scoped>
.bg-content {
    height: calc((100vh - 0.75rem) / 3 - 0.18rem);
    margin-bottom: 0.05rem;
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to right, #44c9c9,#000606) 1;
    padding: 0.05rem;
    .title {
        color: #ffffff;
        position: relative;
        height: 0.35rem;
        line-height: 0.35rem;
        text-align: left;
        border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #3aacac, #000202) 1;
        .title-name {

            font-weight: bold;
            font-size: 0.14rem;
        }
        .title-pl {
            position: relative;
            top: 0.05rem;
        }
        .right-light {
            position: absolute;
            right: 0;
            display: inline-block;
            font-size: 0.14rem;
            padding: 0;
            height: 0;
            font-weight: 400;
            span{
                padding: 2px 5px;
                background-color: #091a1a;
                cursor: pointer;
            }
        }
        .active{
            background-image: url('./../../../assets/home/sun.png');
        }
    }
    .content {
        height: calc((100vh - 0.75rem) / 3 - 0.13rem - 0.45rem);
    }
}
</style>
